<!-- 手机验证 -->
<template>
	<view class="page">
		<u-navbar titleStyle="font-weight: bold;font-size: 30rpx;" :fixed="true" :autoBack="true"></u-navbar>
		<view class="tips">手机验证</view>
		<u--form labelPosition="left" :model="model" :rules="rules" labelWidth="70">
			<u-form-item label="+86" borderBottom prop="userInfo.mobile"><u--input v-model="model.userInfo.mobile" border="none" placeholder="请输入手机号"></u--input></u-form-item>
		</u--form>
		<view class="_abbr">
			<input type="text" placeholder="请输入验证码" />
			<img src="@/static/img/code2.png" alt="" width="80" height="40" @click="switchover" v-if="codeName"/>
			<img src="@/static/img/code3.png" alt="" width="80" height="40" @click="switchover" v-else/>
		</view>
		<view style="border-bottom: 2rpx solid rgb(214, 215, 217);width: 100%;transform: scaleY(0.5);"></view>
		<u-button size="large" type="error" text="下一步" class="mt20"></u-button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			model: {
				userInfo: {
					mobile: '',
					coed: ''
				}
			},
			codeName:true,
			rules: {
				'userInfo.mobile': [
					{
						required: true,
						message: '请输入手机号',
						trigger: ['change', 'blur']
					},
					{
						validator: (rule, value, callback) => {
							return uni.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['change', 'blur']
					}
				]
			}
		};
	},
	methods: {
		// 切换图片
		switchover(){
			this.codeName = !this.codeName
		}
	}
};
</script>

<style lang="scss" scoped>
.page {
	padding-top: 88rpx;
	.tips {
		margin: 60rpx 0 40rpx 20rpx;
		font-size: 52rpx;
	}
	::v-deep .u-form-item__body__left__content__label {
		font-size: 30rpx;
		margin-left: 40rpx;
	}
	._abbr {
		display: flex;
		justify-content: space-between;
		.uni-input-placeholder {
			color: rgb(192, 196, 204);
			font-size: 30rpx;
		}
		input {
			margin-top: 30rpx;
		}
		img {
			display: block;
		}
		padding: 10rpx 40rpx;
	}
}
</style>
